import React, { Component } from 'react';
import { observer } from "mobx-react";
import { Input, InputNumber } from 'antd';

@observer
class IntegrationMission extends Component {
  render() {
    return (
      <div className="integration-mission">
        <div className="mission-item">
          <div className="mission-name">Login:</div>
          <div className="mission-content">
            <InputNumber
              className="h38 w132"
              placeholder="Integral per day"
              min={0}
              max={100}
              precision={0}
              value={this.props.loginIntegral}
              onChange={this.props.loginIntegralOnChange} />
          </div>
        </div>
        <div className="mission-item">
          <div className="mission-name">Sign in:</div>
          <div className="mission-content continuous-item">
            <InputNumber
              className="h38 mb10 max-width"
              min={0}
              max={100}
              precision={0}
              placeholder="Integral per day"
              value={this.props.signIntegral}
              onChange={this.props.signIntegralOnChange}  />
              {
                this.props.continuousSignList.map((item, index) => {
                  return (
                    <div className="flex-item" key={index}>
                      <span className="mr10">for</span>
                      <span className="mr10">
                        <Input
                          className="h38"
                          placeholder="Day"
                          value={item.minLimit}
                          onChange={(e) => this.props.signDaysOnChange(e, index)} />
                      </span>
                      <span className="mr10">could obtain</span>
                      <span className="mr10">
                        <InputNumber
                          className="h38 w170"
                          min={0}
                          max={100}
                          precision={0}
                          placeholder="Integral"
                          value={item.awards[0].amount}
                          onChange={(value) => this.props.signDaysIntegralOnChange(value, index)} />
                      </span>
                      <span className="mr10">and</span>
                      <span className="mr10">
                        <Input
                          addonBefore="₱"
                          className="h38"
                          placeholder="Peso"
                          value={item.awards[1].amount}
                          onChange={(e) => this.props.signDaysPesoOnChange(e, index)} />
                      </span>
                      <span className="mr10 delete-config" onClick={() => this.props.deleteSignItem(index)}>Delete</span>
                    </div>
                  )
                })
              }
              {
                this.props.continuousSignList.length < 7 ?
                <div className="add-item" onClick={this.props.addSignInItem}>+ add</div>
                :
                null
              }
          </div>
        </div>
        <div className="mission-item">
          <div className="mission-name">Like:</div>
          <div className="mission-content">
            <InputNumber
              className="h38 w170"
              min={0}
              max={100}
              precision={0}
              placeholder="Integral per day"
              value={this.props.likeIntegral}
              onChange={this.props.likeIntegralOnChange} />
          </div>
          <div className="mission-name ml40">Share:</div>
          <div className="mission-content">
            <InputNumber
              className="h38 w170"
              min={0}
              max={100}
              precision={0}
              placeholder="Integral per day"
              value={this.props.shareIntegral}
              onChange={this.props.shareIntegralOnChange} />
          </div>
        </div>
        <div className="mission-item">
          <div className="mission-name-long">Read Reward:</div>
          <div className="mission-content read-item">
            {
              this.props.readRewardList.map((item, index) => {
                return (
                  <div className="flex-item" key={index}>
                    <span className="mr10">exceed</span>
                    <span className="mr10">
                      <InputNumber
                        className="h38 w170"
                        min={0}
                        max={100}
                        precision={0}
                        placeholder="Articles"
                        value={item.minLimit}
                        onChange={(value) => this.props.readArticleOnChange(value, index)} />
                    </span>
                    <span className="mr10">could obtain</span>
                    <span className="mr10">
                      <InputNumber
                        className="h38 w170"
                        min={0}
                        max={100}
                        precision={0}
                        placeholder="Integral"
                        value={item.awards[0].amount}
                        onChange={(value) => this.props.readIntegralOnChange(value, index)} />
                    </span>
                    <span className="mr10 delete-config" onClick={() => this.props.deleteReadItem(index)}>Delete</span>
                  </div>
                )
              })
            }
            {
              this.props.readRewardList.length < 10 ?
              <div className="add-item" onClick={this.props.addReadRewardItem}>+ add</div>
              :
              null
            }
          </div>
        </div>
      </div>
    )
  }
}

export default IntegrationMission;
